<!--
  * 角色 列表
-->
<template>
  <a-card title="角色列表" class="role-container" style="padding: 0">
    <a-menu mode="vertical" v-model:selectedKeys="selectedKeys" @select="onSelect">
      <a-menu-item v-for="item in roleList" :key="item.roleId" @click="handleClick(item.roleId)">
        {{ item.roleName }}
      </a-menu-item>
    </a-menu>
  </a-card>
</template>
<script setup>
  import { message, Modal } from 'ant-design-vue';
  import _ from 'lodash';
  import { computed, onMounted, ref } from 'vue';
  import { roleApi } from '/src/api/system/role-api';
  import { SmartLoading } from '/src/components/framework/smart-loading';
  import { smartSentry } from '/src/lib/smart-sentry';

  // ----------------------- 角色列表显示 ---------------------
  const roleList = ref([]);

  onMounted(queryAllRole);

  // 查询列表
  async function queryAllRole() {
    let res = await roleApi.queryAll();
    roleList.value = res.data;
    if (!_.isEmpty(res.data) && res.data[0].roleId) {
      selectedKeys.value = [res.data[0].roleId];
    }
  }

  let selectedKeys = ref([]);
  const selectRoleId = computed(() => {
    if (!selectedKeys.value && _.isEmpty(selectedKeys.value)) {
      return null;
    }
    return selectedKeys.value[0];

  });
  const emits = defineEmits(['getItemId'])
  emits('getItemId', 1)
  const handleClick = (roleId) => {
    emits('getItemId', roleId)
    // 在这里可以对获取到的roleId进行处理
  }
  const onSelect = (selectedKeys, info) => {
    console.log('selected选中的信息', selectedKeys, info);
  };
  // ----------------------- 添加、修改、删除 ---------------------------------
  const roleFormModal = ref();

  // 显示表单框
  function showRoleFormModal(role) {
    roleFormModal.value.showModal(role);
  }

  // ----------------------- 以下是暴露的方法内容 ----------------------------
  defineExpose({
    selectRoleId,
  });
</script>
<style scoped lang="less">
  .role-container {
    height: 100%;
    overflow-y: auto;

    :deep(.ant-card-body) {
      padding: 5px;
    }
  }

  .ant-menu-inline,
  .ant-menu-vertical,
  .ant-menu-vertical-left {
    border-right: none;
  }
</style>